<template>
    <div class="demo-container">
        <!-- 渐变方块 -->
        <div class="box"></div>
        <!-- 渐变文字 -->
        <div class="text">渐变文字</div>
    </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.demo-container {
    // 结合布局知识，这里采用 Flex 布局
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;

    // 渐变方块
    .box {
        width: 100px;
        height: 100px;
        background-image: linear-gradient(120deg, red, yellow, blue);
        background-color: red;
        /* 浏览器不支持的时候显示 */
    }

    // 渐变文字
    .text {
        background: linear-gradient(120deg, red, yellow, blue);
        background-clip: text;
        color: transparent;
    }
}
</style>